<template>
	<view class="page">
		<scroll-view class="scroll-Y" 
		:scroll-top="scrollTop" 
		scroll-y="true" 
		@scrolltoupper="upper" 
		@scrolltolower="lower"
		style="background-color: rgba(255,255,255,0.3);"
		:style="{'height': height + 'px'}"
				@scroll="scroll">
			<view class="common-info">
				<view class="common-info-left">
					<image 
					class="headPic"
					:src="friendInfo.headPic" 
					mode=""></image>
				</view>
				<view class="common-info-right">
					<view class="common-info-name">
						<text class="nickName">{{friendInfo.nickName}}</text>
						<view class="dianzan">
							<label class="iconfont icondianzan"></label>
							<text class="dianzan-number">19839</text>
						</view>
					</view>
					
					<text class="py">PY: {{friendInfo.phone}}</text>
					<view class="vip-icons">
						<view class="vip-icons-left">
							<label class="iconfont iconchuangxiangzhizunvip"></label>
							<label class="iconfont icontaiyang"></label>
							<label class="iconfont icontaiyang"></label>
							<label class="iconfont icontaiyang"></label>
							<label class="iconfont iconmoonbyueliang"></label>
							<label class="iconfont icon-wujiaoxing"></label>
							<label class="iconfont icon-wujiaoxing"></label>
						</view>
						<view class="vip-icons-right">
							<label class="iconfont icon113fangxiang_xiangyou"></label>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconyonghu"></label>
				</view>
				<view class="user-info-information">
					{{friendInfo.sex == 0?'男':'女'}} {{friendInfo.age}}岁 | {{friendInfo.constellation}} | {{friendInfo.school}} | {{friendInfo.profession}} | 1990063814@qq.com
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 个性签名 -->
			<view class="sign-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconqianming"></label>
				</view>
				<view class="sign-info-information">
					做个俗人，贪财好色，一身正气，不谈亏欠，不负遇见
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 会员信息 -->
			<view class="authority-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconhuiyuan_huaban1"></label>
				</view>
				<view class="authority-info-information">
					<label style="color: #ffaa00" class="iconfont iconzuanshibaoshi"></label>
					<label style="color: #55ff00" class="iconfont iconxianxingduosezuanshi"></label>
					<label style="color: #ff007f" class="iconfont icondiamond-01"></label>
					<label style="color: #ff5500" class="iconfont iconzuanshix"></label>
					<label style="color: #00ff00" class="iconfont iconhuiyuan3"></label>
					<label style="color: #55ff7f" class="iconfont iconzuanshix"></label>
					<label style="color: #00aaff" class="iconfont iconzuanshi1"></label>
					<label style="color: #555500" class="iconfont iconhuiyuan1"></label>
					<label style="color: #ff55ff" class="iconfont iconiconfonttubiao_zuanshi"></label>
					<label style="color: #aa00ff" class="iconfont iconzuanshi"></label>
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 我的空间 -->
			<view class="active-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconwujiaoxing"></label>
				</view>
				<view class="active-info-information">
					<view class="info-title">
						<text>我的空间</text>
					</view>
					<view class="active-info-roughly">
						<view class="active-info-pic-first">
							<label class="iconfont iconxiangji1"></label>
							<text style="font-size: 12px;">发表新鲜事</text>
						</view>
						<image 
						class="active-info-pic"  
						v-for="i in 3" :key=i
						src="@/static/headPic.jpg"></image>
					</view>
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 我的礼物墙：最近收到的礼物 -->
			<view class="gift-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconliwu"></label>
				</view>
				<view class="gift-info-information">
					<view class="info-title">
						<text>我的礼物墙：最近收到的礼物</text>
					</view>
					<view class="gift-info-roughly">
						<image class="gift-info-pic"  src="@/static/images/gift1.jpeg"></image>
						<image class="gift-info-pic"  src="@/static/images/gift2.jpg"></image>
						<image class="gift-info-pic"  src="@/static/images/gift3.jpg"></image>
					</view>
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 我的音乐盒 -->
			<view class="music-info">
				<view class="title-icon">
					<label style="font-size: 20px;" class="iconfont iconyinlehe"></label>
				</view>
				<view class="music-info-information">
					<view class="info-title">
						<text>我的音乐盒</text>
					</view>
				</view>
				<view class="info-details">
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<!-- 精选照片 -->
			<view class="favorite-img">
				<view class="favorite-img-title">
					<text>精选照片</text>
				</view>
				<view class="favorite-img-block">
					<view class="favorite-img-left">
						<image style="width: 450rpx; height: 450rpx;" src="@/static/images/show1.jpg" mode=""></image>
						<image src="@/static/images/show2.jpg" mode=""></image>
						<image src="@/static/images/show3.jpg" mode=""></image>
						<image src="@/static/images/show4.jpg" mode=""></image>
						<image src="@/static/images/show5.jpg" mode=""></image>
					</view>
					<view class="favorite-img-right">
						<image src="@/static/images/show6.jpg" mode=""></image>
						<image src="@/static/images/show7.jpg" mode=""></image>
						<image src="@/static/images/show8.jpg" mode=""></image>
						<image src="@/static/images/show9.jpg" mode=""></image>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		
		
		<!-- 底部设计栏 -->
		<view class="buttom-setting">
			<button type="default">音视频通话</button>
			<button type="default">编辑资料</button>
			<button type="default" style="background-color: #10D4FF;" @click="toMessage">发消息</button>
		</view>
		
	</view>
</template>

<script>
	
	import user from "@/api/user.js"
	
	var _self
	export default {
		data() {
			return {
				height:0,//获取的状态栏高度
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				friendInfo:{}
			}
		},
		async onLoad(data) {
			
			_self = this
			
			this.height = uni.getSystemInfoSync().screenHeight
			-uni.getSystemInfoSync().statusBarHeight
			-uni.upx2px(200)
			
			var userinfo = uni.getStorageSync("userInfo")
			if(userinfo == ""){
				// 跳转登录页面
				uni.navigateTo({
					url:'../../login/addAndRegister/addAndRegister',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}else{
				var friendId = data.friendId
				_self.friendInfo = await user.getInfoById(friendId)
			}
			
			
		},
		methods: {
			// 跳转聊天页面
			toMessage(){
				uni.navigateTo({
					url:'../../message/chat/chat?receiver='+this.friendInfo.id,
 					animationType:'pop-in',
					animationDuration:400
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e.detail.scrollTop)
				// this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style>
	@import url("friendDetails.css");
</style>
